<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            line-height: 1.2;
        }
        .box{
            line-height:100px;
            background-color: burlywood;
            height: 100px;
        }
    </style>
</head>
<body>
    <p>
        Here we are encountering something new. The v-bind attribute you are seeing is called a directive. Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying “keep this element’s title attribute up-to-date with the message property on the Vue instance.”
        If you open up your JavaScript console again and enter app2.message = 'some new message', you’ll once again see that the bound HTML - in this case the title attribute - has been updated.
    </p>

    <div class="box">
        <span style="display: block;background-color: red">bbbb</span>
    </div>

    <div class="box">
        <span style="background-color: green;line-height: 200px;">bbbb</span>
    </div>
</body>
</html>